/*
整个SPA的最原始 启动代码
* */
//import './index.css';
//import App from './App.tsx--';
// import reportWebVitals from './reportWebVitals';

import React from 'react';
import { createRoot } from 'react-dom/client';

// import { RelayEnvironmentProvider } from '@react-relay/hooks'; // 确保使用正确的导入路径
// import { Environment } from 'react-relay/store';
//
import { RelayEnvironmentProvider } from 'react-relay/hooks';

//import './index.css';
//这是实例引入: 底层协议栈 new graphQL()实例。
import relayEnvironment from './RelayEnvironment';
import routes from './routes';
import RoutingContext from './routing/RoutingContext';
import createRouter from './routing/createRouter';
import RouterRenderer from './routing/RouteRenderer';
import GlobalState from "./GlobalState";
import ReactDOM from 'react-dom';


// Uses the custom router setup to define a router instanace that we can pass through context
//App直接去找路由表： SPA程序入口。
//自定义的 路由插件/routing/目录的， 后续可能替换掉。
const routeArray = routes(relayEnvironment);

//这是非render()执行的代码，就像是按钮点击运行的代码，而非Component-render环境执行的。登记history监听路由变化cb()回调函数;
//路由器路由直接进来的prepare步骤实际是：loadQuery 直接加载graphql接口到后端获取数据query IssueDetailRootQuery。
//底下的<RouterRenderer />组件才是Component-render()环境执行的; prepare获取数据(在cb()触发函数中搞的)实际上在render()外运行代码。
const router = createRouter(routeArray, {forceRefresh: false});
//底下抄JS文件的，所以router.context没有类型定义;


/**
 * 整个SPA应当只能做同一个的RelayEnvironment的。不支持多个RelayEnvironment同时用，RelayEnvironment相当于用户登录某个后端服务器。
 * 说白了就是只能有一个graphQL后端服务器。多个graphQL后端有问题：schema.graphql模型文件如何合并，名字若是冲突解决?。
 * 不需要登录能够看得页面和需要登录才能访问的页面分开：可以在上面设置个更顶级路由？{外面再加个路由器}还是独立的站点网址。
 * <GlobalState>内部嵌套的路由器下挂页面，在SPA内部点击跳转的就不会再次执行<GlobalState>内的初始化代码的。
 * Relay—面向未来的前端框架   https://zhuanlan.zhihu.com/p/26522410
 * */

const container = document.getElementById('root');
const root = createRoot(container!);


//用<React.StrictMode> </React.StrictMode>整个包裹会报错了：StrictMode可检查兼容性错误，防止未来升级遇到问题。
//适当的开动严格模式# 才可以发现深层的问题！ 比如开了报错'removeChild' on 'Node': <Portal> component:
// @ts-ignore
// @ts-ignore
root.render(

    <RelayEnvironmentProvider environment={relayEnvironment}>
        <GlobalState>
            <RoutingContext.Provider value={router.context}>
                {/* Render the active route 呈现页面的，是组合的内容*/}
                <RouterRenderer />
            </RoutingContext.Provider>
        </GlobalState>
    </RelayEnvironmentProvider>

);



// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

// reportWebVitals();
